<!--
 * @Description: 字典类型
 * @Author: Liu Zhiwang
 * @Date: 2021-04-09 11:49:17
 * @LastEditTime: 2022-08-31 10:19:27
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="app-container v-flex">

    <div style="padding-top: 10px">
      <el-upload
        style="float:right;"
        with-credentials
        :action="action"
        accept=".xls, .xlsx"
        name="file"
        :headers="headers"
        :on-progress="uploading"
        :show-file-list="false"
        :on-success="uploadSuccess">
        <el-button
          class="operation-btn"
          size="mini"
          icon="el-icon-document">开始导入</el-button>
      </el-upload>
      <el-button icon="el-icon-document" size="mini" style="float: right" @click="importData">  下载模板</el-button>
    </div>
    <div ref="main" class="v-flex-elastic">
      <base-table
        :height="height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-operation="tableData.showOperation"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor" />
    </div>
    <el-dialog
      title="导入结果"
      :visible.sync="dialogVisible"
      width="30%">
      <div class="dialogResult">
        <span style="color:red">{{ dialogResult }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getListPage
} from '@/api/cms/comprehensiveAnalysis/1CDataImport'
import { downloadFile } from '@/utils/public'
import { getToken } from '@/utils/auth'
import { tableMixin } from '@/utils/public'
import { parseTime } from '@/utils'

export default {
  name: 'Name',
  components: {
  },
  mixins: [tableMixin],
  data() {
    return {
      loadProgress: 0, // 动态显示进度条
      progressFlag: false, // 关闭进度条
      dialogVisible: false,
      dialogResult: '',
      // 表格高度
      height: 0,
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'fileName', width: 300, label: '导入文件名称' },
          /* { prop: 'status', label: '导入状态' },*/
          { prop: 'createDatetime', width: 150, label: '导入时间', formatter: row => parseTime(row.createDatetime, '{y}-{m}-{d} {h}:{i}:{s}') },
          { prop: 'remark', showOverflowTooltip: 'N', label: '导入结果' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: false,
        showFilterColumn: false,
        operatonWidth: '160px',
        defaultOperations: [],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 顶部操作栏配置
      filterData: {
      },
      action: process.env.VUE_APP_BASE_API + '/cms/JcjcRowDataImportLog/upload',
      // 'http://localhost:10248/cms/JcjcRowDataImportLog/upload',
      // process.env.VUE_APP_BASE_API + '/cms/JcjcRowDataImportLog/upload',
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  created() {
    this.getListPage()
  },

  activated() {

  },
  mounted() {},
  methods: {
    // 获取下拉数据、字典
    getList() {
    },
    getListPage() {
      this.loadProgress = 0 // 动态显示进度条
      this.progressFlag = false // 关闭进度条
      this.tableData.loading = true
      getListPage(this.listQuery).then(response => {
        this.tableData.tableList = response.data
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
    },

    uploadSuccess(response, file, fileList) {
      if (response.status !== 200) {
        this.notifiyError(response.message)
        // this.getListPage()
      } else {
        if (response.data.errMsg) {
          this.dialogResult = response.data.errMsg
          this.dialogVisible = !this.dialogVisible
        }
        this.getListPage()
      }

      // this.getEmergencyDutyDataList() // 查询应急值班信息列表
    },

    importData() {
      var url = process.env.VUE_APP_BASE_API + '/cms/JcjcRowDataImportLog/download?1=1' + '&access_token=' + getToken()
      window.location.href = url
      // downloadFile(param)
    },
    uploading() {
      // alert('文件正在上传，请稍后查看结果')
      // this.getListPage()
      this.progressFlag = true // 显示进度条
      this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress = 100
        setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
      }
    }

  }
}
</script>
<style scoped lang="scss">
  .el-dialog--center .el-dialog__footer {
    text-align: center;
  }
  .dialogResult{
    text-align: center;
  }
</style>

